<template>
	<div class="experience-detail" v-if="data">
		<div class="title-btn layout pt20rem pb20rem" v-show="scrollTop < 100" v-if="showAndroid !='1'">
			<i class="iconfont icon-zuojiantouyuanxing ml30rem" style="color:#bfbfbf" @click="$router.back('-1')" v-if="showApp!='1'"></i>
			<div v-else></div>
			<div class="mr30rem ">
				<!-- <i class="iconfont icon-1016fenxiangyuanxing"></i> -->
				<i class="iconfont icon-gengduo1" style="color:#bfbfbf"  @click="sheetVisible = true"></i>
			</div>
		</div>
		<section class="banner">
			<swiper :data="banner" img-key="pic_cover_big" :options="bannerOptions">
			</swiper>
			<div class="count-time">
				<countdown :data="data.count_down" :type="countdownType" v-if='data.count_down > 0'></countdown>
				<div class="white pt20rem pb20rem" style="background:rgba(255,0,0,.8)" v-else>活动已过期</div>
			</div>
		</section>
	 	<section class="pl30rem pr30rem pt25rem pb25rem border-b20">
	 		<p class="fs32rem c333 bold">{{data.goods_name}}</p>
	 		<div class="layout-juscon mt35rem">
				<div class="price">
					<p class="fs40rem red">￥{{ data.price }}</p>
					<del class="fs26rem c999">原价￥{{ data.market_price }}</del>
				</div>
				<div class="flex-end">
					<p class="fs26rem c666 layout"><i class="mr25rem">限量{{ data.clicks }}份</i><i>已有{{ data.sales }}人预约</i></p>
					<p class="c999 fs24rem mt10rem">预计发货时间:{{ data.ty_endtime * 1000,'yyyy年MM月dd日' | formatDate  }}</p>
				</div>
	 		</div>
	 	</section>
		<router-link tag="section" :to="'/shop/' + data.shop_id" class="describe pl30rem pr30rem border-b20" v-if="data.shop_credit">
			<div class="describe-title flex-left flex-center pt40rem pb40rem">
				<span class="fs32rem c666 mr15rem">{{ data.shop_name }}</span>
				<div class="star mr30rem layout">
					<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in Math.floor(data.shop_credit)"></i>
					<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(data.shop_credit)" ></i>
				</div>
				<i class="iconfont icon-right2 flex-center"></i>
			</div>
			<div class="pb60rem layout">
				<span class="fs26rem c666">描述相符:{{data.shop_desccredit}}</span>
				<span class="fs26rem c666">服务态度:{{ data.shop_servicecredit }}</span>
				<span class="fs26rem c666">发货速度:{{data.shop_deliverycredit}}</span>
			</div>
		</router-link>
		
		<goods-detail :data="data" v-if="data.rules"></goods-detail>

		<div style="height:3.571428rem;" v-show="showfooter"></div>
		<footer class="commodity-footer bg-white border-t" v-show="showfooter">
			<div class="footer">
			 	<ul class="layout-juscon">
	                <li><router-link to="/ordering/detail/Ordering-nav/19?type=2" class="fs24rem c666 pt25rem">更多新品</router-link></li>
	                <li v-if="data.button_status == -201" @click="goLogin"><a class="fs24rem c666 pt25rem">预约体验</a></li>
	                <li v-if="data.button_status == 201 && isty != 'true'" @click="subscribe"><a class="fs24rem c666 pt25rem">预约体验</a></li>
	                <li v-if="data.button_status == 202 && isty != 'true'" @click="modalShow = true"><a class="fs24rem c666 pt25rem on202">预约体验</a></li>
	                <li v-if="data.button_status == -301 && isty != 'true'" @click="appointmented"><a class="fs24rem c666 pt25rem on202">预约体验</a></li>
	                <!-- <li v-if="data.button_status == -302 && isty != 'true'" @click="due"><a class="fs24rem c666 pt25rem on202">预约体验</a></li> -->
	                <!-- <li v-if="data.button_status == '301'" @click="appointmented"><a class="fs24rem c666 pt25rem">预约体验</a></li> -->
	                <router-link tag="li" :to="'/detail/lucky?sku_id='+ data.sku_list[0].sku_id" v-if="isty == 'true'&& data.button_status == '-302'" @click="popupVisible = true"><a class="fs24rem c666 pt25rem on-301">幸运名单</a></router-link>
	                <li v-if="data.activity_cate != 3 || data.button_status == 201 || data.button_status == -302"><router-link to="/member/experience" class="fs24rem c666 pt25rem">我的体验</router-link></li>
	                <li v-if="data.button_status == 202 && data.activity_cate == 3"><router-link :to="'/detail/share-detail?goodsId=' + data.new_goods_id" class="fs24rem c666 pt25rem share">分享有礼</router-link></li>
	            </ul>
			 </div>
		</footer>
		
		<!-- 规则 -->
		<popup v-model="popupVisible" position="bottom" v-if="ruleData">
			<h2 class="fs38rem align-center border-b pt20rem pb20rem">规则协议<i class="iconfont icon-guanbi" @click=" popupVisible = false "></i></h2>
			<div v-html="ruleData.content">
				
			</div>
			<div class="layout border-t popup-button">
				<span class="fs36rem align-center grey border-r w50" @click=" popupVisible = false ">取消</span>
				<span class="fs36rem align-center green w50" @click="agree">同意</span>
			</div>
		</popup>
		<!-- 模态框体验机会 -->
		<popup v-model="modalShow" style="width:90%;" class="circle-8">
			<div class="coupon">
				<h2 class="fs30rem black bold align-center border-b pt40rem pb40rem">获得体验机会<i class="iconfont icon-guanbi" @click="modalShow = false"></i></h2>
				<p class="fs28rem c999 pt20rem pb50rem pl30rem pr30rem">温馨提示:多一次体验机会，获得的几率将会增加，你可以使用体验券再次体验，也可以邀请好友获得机会</p>
				<div class="border-t layout">`	
					<router-link tag="button" to="/member/invite" class="pt30rem pb30rem border-r w50" style="color:#a074dd;">邀请好友</router-link>
					<router-link tag="button" to="/member/surpriseCoupon" class="pt30rem pb30rem w50">使用体验券( {{ data.exprience_count }} )</router-link>
				</div>
			</div>
		</popup>
		<!-- 添加地址 -->
		<popup v-model="popupAddress" style="width:90%;" class="circle-8">
			<div class="coupon">
				<h2 class="fs32rem c333 bold align-center border-b pt40rem pb40rem">确定收货地址</h2>
				<router-link tag="div" :to="'/member/address?type=experience&id='+ goods_id" class="address bg-f5 layout pt20rem pb20rem pl30rem pr30rem" v-if="other_list">
					<div class="flex_1 mr10rem">
						<h3 class="bold fs30rem mb10rem c333">商品收货的地址</h3>
						<p class="fs26rem c666 pt10rem pb10rem" v-if="other_address">{{ other_address.username }} <span class="ml20rem fs26rem c666">{{ other_address.moblie }}</span></p>
						<p class="fs26rem c666" v-if="other_address">{{ other_address.pcd_address }}{{ other_address.address }}</p>
						<p class="fs26rem c666 pt10rem pb10rem" v-for="item in other_list" v-if="!other_address && item.is_default=='1'">{{ item.username }} <span class="ml20rem fs26rem c666">{{ item.moblie }}</span></p>
						<p class="fs26rem c666" v-for="item in other_list" v-if="!other_address && item.is_default=='1'">{{ item.pcd_address }}{{ item.address }}</p>
					</div>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<router-link tag="div" :to="'/member/address?type=experience&id='+ goods_id" class="address bg-f5 layout pt20rem pb20rem pl30rem pr30rem" v-else>
					<h3 class="bold fs30rem mb10rem c333">请添加地址</h3>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<div class="pl30rem pr30rem pt20rem pb20rem">
					<p class="fs26rem c999" style="line-height:150%;">注:系统将在预约体验结束后24小时公布体验幸运名单，请注意查看</p>
					<p class="fs24rem cxo-red-color" style="line-height:150%;">(每天签到,邀请及分享好友体验,可以提升幸运值,提高体验机会)</p>
				</div>
				<div class="border-t layout">
					<button class="pt30rem pb30rem border-r w50" @click="popupAddress = false">取消</button>
					<button class="pt30rem pb30rem w50" @click="yuYuehandle">确定</button>
				</div>
			</div>
		</popup>
		<actionsheet :actions="actions" v-model="sheetVisible"></actionsheet>
	</div>
</template>

<script>
	import { getTYDetail,userYuyuehandler } from "@/api/goods-detail";
	import { getAddress } from "@/api/address"; 
	import { getRules } from '@/api/rules';
	import { getStar } from "@/api/rating";
	import Swiper  from "@/components/Swiper";
	import Countdown from '@/components/Countdown';
	import GoodsDetail from "@/components/Goods-detail";
	import { Popup, Actionsheet } from 'mint-ui';
	import Modal from '@/utils/modal';
	import { iosapp,formatDate } from "@/utils";
	export default{
		components:{
			Swiper,
			Countdown,
			GoodsDetail,
			Popup,
			Actionsheet,
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll);
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
	  	},
		data()
		{
			return{
				scrollTop     : '',
				address_id    : '',
				data          : null,
				ruleData      : [],
				banner        : [],
				other_list    : [],
				other_address : null,
				countdownType : false,
				modalShow     : false,
				popupVisible  : false,
				popupAddress  : false,
				sheetVisible  : false,
				actions       : [{name:'投诉该商品',method : this.complaint}],
				showAndroid   : this.$route.query.isapp,
				showApp       : window.sessionStorage.getItem('isapp'),
				token         : window.localStorage.getItem('token'),
				uid           : window.localStorage.getItem('uid'),
				isty          : this.$route.query.ty,
				goods_id      : this.$route.params.id,
				bannerOptions : {
					slidesPerView :'auto',
					loopedSlides  :'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				}
			}
		},
		created()
		{
    		window.scrollTo(0,0);
    		this.loadData();
    		this.loadRuleData();
    		this.loadStar();
    		this.loadAddressData();
		},
        computed: {
            showfooter: function () {
                return this.showAndroid != 1&&this.data;
            }
        },
		methods:
		{
			handleScroll ()	 
			{
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			loadData()
			{
				var params = {
					goods_id : this.goods_id,
					status   : this.$route.query.status,
					b_state  : this.isty == 'true' ? '1' : '0',
					uid      : this.uid,
				}
				getTYDetail(params).then( res => {
					this.data = res.data;
					this.banner = res.data.img_list;
				})
			},
			loadAddressData()
			{
				if(this.showApp)
					return;
				if(this.$store.state.select_address_data){
					this.popupAddress = true;
					this.other_address = this.$store.state.select_address_data;
					this.$store.dispatch('selectAddress',null)
					return;
				}

				getAddress(this.uid).then( res => {
					this.other_list = res.data;
					for(let i in this.other_list){
						if(this.other_list[i].is_default == 1)
						{
							this.address_id = this.other_list[i].id;
							break;
						}
					}
				});
			},
			loadRuleData()
			{
				getRules(6).then( res => {
					this.ruleData = res.data;
				})
			},
			loadStar()
			{
				getStar(this.goods_id,'0').then( res => {
					this.starData = res.data;
				})
			},
			yuYuehandle()
			{
				if(!this.other_address && !this.address_id)
					return  this.$router.push('/member/address/?type=experience&id='+ this.goods_id)

				let params = {
					sku_id     : this.data.sku_list[0].sku_id,
					uid		   : this.uid,
					shop_id    : this.data.shop_id,
					address_id : this.other_address ? this.other_address.id : this.address_id,
					sign       : "0"
				}
				userYuyuehandler(params).then( res => {
					this.$router.replace("/detail/Experience-sucess?time=" + res.data.end_time + '&goods_id=' + this.goods_id + '&yushou_status=' + res.data.yushou_status);
				});
			},
			appointmented()
			{
				if(this.token)
					Modal.alert('您好！该商品暂时还不能预购，您可以先看一下其他的商品')
				else
					this.$router.replace('/login?redirect=' + this.$router.currentRoute.fullPath);
			},
			due()
			{
				$toast('该商品已过期')
			},
			complaint()
			{
				this.$router.push('/complaint?goods_id=' + this.goods_id);
			},
			goLogin()
			{
				iosapp('ExperienceLoginAction');
			},
			subscribe()
			{
				if(window.localStorage.getItem('agree'))
					this.popupAddress = true;
				else
					this.popupVisible = true;
			},
			agree()
			{
				this.popupVisible = false;
				this.popupAddress = true;
				window.localStorage.setItem('agree',true);
			}
		}
	}
</script>

<style lang="less">
	.experience-detail{

		// 别改我代码，叼你嗨
		.title-btn{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			i{
				font-size: 60/28rem;
			}
		}
		.banner{
			position:relative;
			.swiper-pagination-bullets{
				bottom:100/28rem !important;
			}
			.count-time{
				position: absolute;
				bottom: 0;
				left:0;
				width: 100%;
				z-index: 99;
				display: block;
				text-align:center;
			}
			.count-down-two{
				height: 80/28rem;
				line-height: 80/28rem;
				background: rgba(255,0,0,.8);
				color: #fff;
				font-size: 34/28rem;
			}
		}
		.goods-detail{
			height: 90/28rem;
			line-height: 90/28rem;
			.select-color{
				font-weight: 600;
				color: #333;
				position: relative;
			}
			.select-color:after{
				content: "";
				display: block;
				background-color: #ff0036;
				height: 6/28rem;
				width: 100%;
				position: absolute;
				bottom: -0;
				left: 0;
			}
		}
		.commodity-footer{
			height:100/28rem;
			line-height: 100/28rem; 
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			.footer{
				position: relative;
				ul{
					height: 100/28rem;
					display: flex;
					justify-content: space-between;
					li{
						width:320/28rem;
						text-align: center;
						display: block;
						position: relative;
						a{
							background-position: center 10/28rem;
							background-size: 44/28rem;
							background-repeat: no-repeat;
							display: block;
						}
						&:nth-child(1) a{
							background-image: url(../../../assets/index.png);
						}
						&:nth-child(3) a{
							background-image: url(../../../assets/icon5.png);
						}
						&:nth-child(2) a{
							display: inline-block;
							width: 3.75rem;
							margin-top: -20%;
							padding-top: 72/28rem;
							height: 105/28rem;
							border-radius:50%;
							background-size: 100%;
							background-image: url(../../../assets/icon4.png);
						}
						.on202{
							background-image: url(../../../assets/icon6.png) !important;
						}
						.on-301{
							background-image: url(../../../assets/icon7.png) !important;
						}
						.share{
							background-image: url(../../../assets/icon12.png) !important;
						}
					}
				}
			}
		}
		.mint-popup{
			width: 100%;
			h2{
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}
			.popup-button{
				height: 100/28rem;
				line-height: 100/28rem;
				span{
					border-right-color: #d7d7d7;
				}
			}
		}
		.modal{
			background-color: rgba(0,0,0,0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.modal-content{
				position: absolute;
				width: 90%;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 16/28rem;
				.modal-btn{
					span{
						height: 100/28rem;
						line-height: 100/28rem;
						border-color: #e5e5e5;
					}
				}
			}
		}
	}
</style> 